<template>
	<view class="content">
		<view class="topLogo">
			<image src="https://mp-6f81e20c-45ed-420c-8b9c-c84e21bce18b.cdn.bspapp.com/icon/logo.png" mode="aspectFit" class="logoImg">
			</image>
			
		</view>
		<view class="block">
			日记~重置密码
		</view>
		<view class="block"></view>
		<input class="uni-input" placeholder="输入新密码" type="text" v-model="pwd"/>
		<input class="uni-input" placeholder="确认密码"  type="text"  v-model="repeatPwd"/>
		<view class="block"></view>
		<button class="resertPwd" @click="updatePwd">重置密码</button>
		
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="warn" cancelText="关闭" confirmText="确定" title="提醒" :content="content" ></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {updatePwd} from '@/api/user.js'
	export default {
		data() {
			return {
				email:"",
				pwd:"",
				repeatPwd:"",
				content:""
			};
		},
		onLoad(e) {
			this.email = e.email
		},
		methods:{
			updatePwd(){
				if(this.pwd==this.repeatPwd){
					updatePwd({
						"email":this.email,
						"password":this.pwd,
						
					}).then(res=>{
						if(res.data.data==1){
							this.content = "修改成功,正在跳转登录"
							this.dialogToggle()
							setTimeout(function(){
								uni.navigateTo({
									url:"/pages/user/login"
								})
							},2000)
						}else{
							this.content = "修改失败,请重试"
							this.dialogToggle()
						}
					})
				}else{
					this.content = "两次密码输入不一致"
					this.dialogToggle()
				}
			},
			dialogToggle() {
				this.$refs.alertDialog.open()
			}
		}
	}
</script>

<style lang="scss">
page{
			background-color: $bg-blue;
		}
		.content{
			.topLogo{
				width: 100%;
				height: 35vh;
				position: relative;
				.logoImg{
					width: 15vh;
					height: 15vh	;
					position: absolute;  /* 让图片绝对定位 */  
					bottom: 0;  /* 将图片定位到 `.topLogo` 的底部 */  
					left: 50%;  /* 将图片在水平方向上居中 */  
					transform: translateX(-50%);  /* 在水平方向上移动图片，使其完全居中 */ 
					opacity: 0.7;
				}
			}
			.block{
				width: 100%;
				height: 7vh;
				text-align: center;
				font-size: 2.4vh;
				color: white;
				// background-color: rebeccapurple;
				text{
					font-size: 1.4vh;
				}
				.isSurePwd{
					color: red;
					
				}
			}
			.uni-input{
					background-color: white;
					width: 70%;
					height: 5vh;
					border-radius: 7rpx;
					margin: auto;
					margin-bottom: 2vh;
					text-align: center;
					color: black;
			}
			.resertPwd{
				width: 70%;
				background-color: #559dcf;
				color: white;
			}
			
			
		}
</style>
